<template>
	<!-- 自定义导航栏 -->
	<view class="navBarBox" :style="{backgroundColor:propsColor}">
		<!-- 状态栏占位 -->
		<view class="statusBar" :style="{ paddingTop:statusBarHeight+'px' }"></view>
		<!-- 真正的导航栏内容 -->
		<view class="flex justify-between align-center" :style="{ height:navBarHeight+'px' }">
			<slot class="navBar" name="header"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			propsColor: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				navBarHeight: 0,
			}
		},
		mounted() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			// #ifdef MP-WEIXIN
			// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			const custom = wx.getMenuButtonBoundingClientRect()

			// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			this.navBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2

			// #endif
		}

	}
</script>

<style scoped>
	/* 导航栏 */
	.navBarBox {
		width: 100vw;
		position: sticky;
		top: 0;
		z-index: 1000;
		font-size: 16px;
	}
</style>